<template>
  <footer>
    <router-link :to="item.path" tag="div" class="footer-nav" v-for="item of list" :key="item.id">
      <img :src="item.url" alt="">
      <p :class="$route.path==item.path?'nav-active':''">{{item.desc}}</p>
    </router-link>
  </footer>
</template>

<script>
export default {
  name: 'Footerbar',
  data () {
    return {
      list: [
        {
          id: '001',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/8325/8/4331/3095/5bda5c89E1be47c14/47b6a296683a12a5.png?width=90&height=90',
          desc: '首页',
          path: '/'
        },
        {
          id: '002',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/1890/15/14183/1269/5bda5c97E34734b01/241a0f5b17fd3e51.png?width=60&height=60',
          desc: '赚钱',
          path: '/makemoney'
        },
        {
          id: '003',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/5291/40/14133/594/5bda5ca3E92d0e800/09ac81fa5a5c96ef.png?width=60&height=60',
          desc: '借钱',
          path: '/borrow'
        },
        {
          id: '004',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/3358/38/14064/816/5bda5cabEcb7eca8b/9bb064f1cda7ceba.png?width=60&height=60',
          desc: '省钱',
          path: '/savemoney'
        },
        {
          id: '005',
          url: 'https://img12.360buyimg.com/jrpmobile/jfs/t1/7491/15/4277/926/5bda5cb9E421a0e60/89ee14ce9daf4aab.png?width=60&height=60',
          desc: '金融会员',
          path: '/account'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  footer
    display flex
    justify-content space-around
    background #f3f5f7
    border-top 1px solid #ccc
    padding 12px 0
    position fixed
    left 0
    right 0
    bottom 0
    z-index 999
    .footer-nav
      text-align center
      img
        width 44px
        margin 12px auto 6px
      p
        font-size 22px
        white-space nowrap
        text-overflow ellipsis
        overflow hidden
        color #B1B4BB
      .nav-active
        color #4668FF
</style>
